<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sd" uri="/struts-dojo-tags" %>


<html>
    <head>
        <link rel="stylesheet" href="<s:url value="/styles/liquid-slider-0.1.css"/>" type="text/css"/>
        <link rel="stylesheet" href="<s:url value="/js/bootstrap/css/bootstrap.min.css"/>"/>
        <link rel="stylesheet" href="<s:url value="/js/tooltip/css/atooltip.css"/>"/>
        <script type="text/javascript" src="<s:url value="/js/jquery-1.7.2.min.js"/>"></script>
        <script type="text/javascript" src="<s:url value="/js/jquery-ui.min.js"/>"></script>
        <script type="text/javascript" src="<s:url value="/js/jquery/jquery.liquid-slider-0.1.min.js"/>"></script>
        <script type="text/javascript" src="<s:url value="/js/tooltip/js/jquery.atooltip.min.js"/>"></script>
        <script type="text/javascript" src="<s:url value="/js/remoteAccess/remoteAccess.js"/>"></script>
        <script type="text/javascript" src="<s:url value="/js/remoteAccess/laboratory.js"/>"></script>
        <sd:head parseContent="true"/>
        <script type="text/javascript">
            var contadorParaNuevasFilas = 0;
        </script>
        <script>
            $(function(){
                $('#slider-id').liquidSlider({
                    autoHeight:true,
                    slideEaseDuration:800,
                    continuous: false,
                    responsive: true,
                    mobileNavigation:true,
                    dynamicArrows:false,
                    crossLinks:true
                });
            });
        </script>
    </head>
    <body style="text-align: center">

    <s:url var="regionsUrl" action="getRegions"  namespace="/"/>
    <s:url var="citiesUrl" action="getCities"  namespace="/"/>
    <s:url var="countryCodeUrl" action="getCountryCode" namespace="/"/>


    <img src="<s:url value="/images/BMS_logo.jpg"/>" alt="BMS Logo"
             style="width: auto;
                    height: auto;
                    margin-bottom: 40px;
                    margin-top: 20px;"/>

        <s:form theme="simple">

            <s:hidden name="auth" value="%{auth}"/>

            <div class="liquid-slider"  id="slider-id">
                <div>
                    <h2 class="title">Step 1 - Staff</h2>
                    //Content goes here
                </div>
                <div>
                    <h2 class="title">Step 2 - Site</h2>
                    //Content goes here
                </div>
                <div>
                    <h2 class="title">Step 3 - Ethic Committee</h2>
                    //Content goes here
                </div>
                <div>
                    <h2 class="title">Step 4 - Laboratory</h2>
                    <s:include value="laboratory.jsp"/>
                    <s:submit action="save" value="Save"  theme="simple"/>
                </div>
            </div>

            <p>
                <a href="#left" class="btn btn-primary btn-large" data-liquidslider-ref="slider-id">«Previous Step</a>
                <a href="#right" style="margin-left: 200px" class="btn btn-primary btn-large" data-liquidslider-ref="slider-id">Next Step»</a>
            </p>

        </s:form>
    </body>
</html>